<!--
 * @Author: wjc
 * @Date: 2025-09-15 15:18:52
 * @LastEditors: wjc
 * @LastEditTime: 2025-09-15 15:18:56
 * @Description: 
-->
<template>
  <div
    class="flex-center hover:text-foreground text-foreground/60 hover:bg-accent-hover bg-accent absolute bottom-2 right-3 z-10 cursor-pointer rounded-sm p-[5px] transition-all duration-300"
    @click="toggleFixed"
  >
    <Icon icon="lucide:pin-off" v-if="!expandOnHover" class="size-3.5" />
    <Icon icon="lucide:pin" v-else class="size-3.5" />
  </div>
</template>

<script setup lang="ts">
  import { Icon } from '@iconify/vue'

  defineOptions({
    name: 'LayoutSidebarFixed',
  })

  const expandOnHover = defineModel<boolean>('expandOnHover')

  function toggleFixed() {
    expandOnHover.value = !expandOnHover.value
  }
</script>
